<template>
  <div class="content-card">
    <div class="title">
      <div
        class="btn"
        :class="{ 'btn-active': btnActive === 'left' }"
        @click="setBtnActive('left')"
      >
        {{ "目录访问次数排行" }}
      </div>
      <div
        class="btn"
        :class="{ 'btn-active': btnActive === 'right' }"
        @click="setBtnActive('right')"
      >
        {{ "目录订阅排行" }}
      </div>
    </div>
    <div class="body">
      <div id="overview-backup__chart3" />
    </div>
  </div>
</template>

<script>
export default {
  name: "o7-chart",
  props: {},
  data() {
    return {
      charts3Ref: {},
      btnActive: "left",
    };
  },
  mounted() {
    this.registerCharts3();
    this.setChart3(this.btnActive);
  },
  methods: {
    registerCharts3() {
      this.charts3Ref = this.$echarts.init(
        document.getElementById("overview-backup__chart3")
      );
    },
    setChart3(target) {
      let option3_1 = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          data: [
            "人口基本信息",
            "户籍信息",
            "不动产登记",
            "证照申请",
            "医保查询",
          ],
        },
        yAxis: {
          name: "(111)",
        },
        series: [
          {
            name: "高频Top5",
            type: "bar",
            data: [20, 28, 38, 36, 56],
            barWidth: 10,
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#93B9FF",
                },
                {
                  offset: 1,
                  color: "#5C87D4",
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option3_2 = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: [
            "人口基本信息",
            "户籍信息",
            "不动产登记",
            "证照申请",
            "医保查询",
          ],
        },
        grid: {
          left: "1%",
          right: "5%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        series: [
          {
            name: "高频Top5",
            type: "bar",
            data: [20, 28, 38, 36, 56],
            barWidth: 15,
            itemStyle: {
              borderRadius: 4,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#93B9FF",
                },
                {
                  offset: 1,
                  color: "#5C87D4",
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option3 = {
        left: option3_1,
        right: option3_2,
      };
      this.charts3Ref.setOption(option3[target], true);
    },
    setBtnActive(target) {
      if (target === this.btnActive) {
        return;
      }
      this.btnActive = target;
      this.setChart3(this.btnActive);
    },
  },
};
</script>

<style lang="less" scoped>
.content-card {
  .title {
    padding: 10px;
    display: flex;
    justify-content: center;
    .btn-active {
      background: #698bc0;
      color: white;
    }
    .btn {
      padding: 10px 20px;
      font-size: 14px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
      filter: drop-shadow(0 0 2px #698bc0);
      &:nth-child(1) {
        border-top-left-radius: 26px;
        border-bottom-left-radius: 26px;
        margin-right: 10px;
      }
      &:nth-child(2) {
        border-top-right-radius: 26px;
        border-bottom-right-radius: 26px;
      }
    }
  }
  .body {
    width: 100%;
    height: 300px;
    :first-child {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
